
@borderStyle: 1px solid rgb(231, 231, 231);

.wdu-table__gridLine {
    &:first-child {
        border-right: @borderStyle;
    }

    &:last-child {
        border-left: @borderStyle;
    }
}

.wdu-table__container {
    position: relative;
    overflow: hidden;
}

.wdu-table {
    width: 100%;
    position: relative;
    border-collapse: collapse;
    border: @borderStyle;
    table-layout: fixed;
    font-size: 14px;
    z-index: inherit;

    &__realBody {
        overflow: auto;
    }

    &__title {
        .wdu-text-title();
        margin: 15px;
    }

    &__header {
        text-align: center;
        line-height: 30px;
        .wdu-bg-plain();

        &-cell {
            padding: 10px 20px;
            border-bottom: @borderStyle;
            border-top: @borderStyle;
            border-right: @borderStyle;
            box-sizing: border-box;
            word-break: break-all;
            white-space: break-spaces;

            .wdu-table__gridLine();
        }
    }

    &__row {
        color: @wdu-font-color-paragraph;
        .wdu-transition-quick();

        &:hover {
            background-color: #c9c9c9;
        }
    }

    &__body {
        background-color: white;
    }

    &__cell {
        padding: 15px 20px;
        word-break: break-all;
        white-space: break-spaces;
        text-align: left;
        box-sizing: border-box;
        border: @borderStyle;

        .wdu-table__gridLine();

        &-index {
            width: 80px;
            border-right: @borderStyle;
            text-align: center;
        }
    }

    thead {
        position: sticky;
        top: 0px;
    }

    &__headerMask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 100;
    }
}
